<template>
	<view class="body">
		<view class="topw">
			<view class="shop">
				<image :src="shop_info.category_image" mode="aspectFill" class="Boutique"></image>
				<view class="title">
					{{shop_info.shop_name}}
				</view>
				<view class="right" @click="toggle">
					<view class="size">
						切换
					</view>
					<image :src="$IMG_URL('/static/home/indicate.png')" mode="aspectFill" class="icon"></image>
				</view>
			</view>
			<headerTwo ref="header" :isLoading="isLoading" @changeIndex="changeHeaderIndex" @dateConfirm="dateConfirm" @refresh="$u.debounce(refresh,500)">
			</headerTwo>
			<view class="search-box">
				<u-search placeholder="会员姓名、手机号" :input-style="inputStyle" :show-action="false" v-model="query.search" shape="square"
					@change="$u.debounce(getSearch,500)"></u-search>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="scrolltolower">
			<view class="comlum_Y" v-if="list.length">
				<view v-for="(item,index) in list" :key="index" class="Item">
					<view class="top">
						<view class="left">
							{{item.open_date}}
						</view>
						<!-- <view class="right">
							<view class="mr" :class="item.is_allot == 1 ?'color1':'color2'"
								@click="changeItemhasMore(item, index)">
								{{item.is_allot == 0?'未分配':item.coach_name}}
							</view>
							<u-icon :name="item.hasMore ?'arrow-up':'arrow-down'" color="#666666" size="18"></u-icon>
						</view> -->
					</view>
					<view class="center" >
						<image :src="item.avatar" mode="aspectFill" class="img" @click.stop="$PREVIEW_IMAGE(item.avatar)"></image>
						<view class="center_vi" @click.stop="$ROUTELINK('member/deatil?user_id=' + item.user_id)">
							<view class="comlum_cen">
								<view class="first">
									<view class="name_box">
										{{item.username}}
									</view>
									<image :src="item.gender?$IMG_URL('/static/test/boylogo.png'):$IMG_URL('/static/test/girlLogo.png')"
										mode="aspectFill" class="logo"></image>
									<text class="size3">{{item.user_str}}</text>
								</view>
								<view class="center_socund">
									<image :src="$IMG_URL('/static/test/phone.png')" mode="aspectFill" class="phone"></image>
									<text class="size2">{{item.mobile}}</text>
								</view>
								<view class="center_three">
									{{item.remark}}
								</view>
							</view>
							<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
						</view>
					</view>
					<view class="footsc">
						<view class="foot_Item width1">
							<view class="size4">
								总消费(元)
							</view>
							<view class="size5">
								{{item.consume}}
							</view>
						</view>
						<view class="foot_Item width2">
							<view class="size4">
								卡剩余(天)
							</view>
							<view class="size5">
								{{item.card_day}}
							</view>
						</view>
						<view class="foot_Item">
							<view class="size4">
								私教课剩余(节)
							</view>
							<view class="size5">
								{{item.class_num}}
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
			<empty v-else :content="'到店会员'"></empty>
		</scroll-view>
		<u-toast ref="uToast" />
		<Loading v-if="isLoading" :logo="$IMG_URL('/static/newVersion/login3.png')" color="#4ECDC4" :speed="1000"
			:bounceHeight="50" text="数据加载中" />
		<u-picker  v-model="popupShow" mode="selector" :range="shopParams" range-key="shop_name" :customTimeTag="true" :title="'门店'"
			:popupheight="'786rpx'" :borderRadius="16" @confirm="changeShop"></u-picker>
	</view>
</template>

<script>
	import {
		atShop,
	} from '@/api/manager.js'
	import{
		shopList,
		storememberResList
	} from '@/api/coach.js'
	import headerTwo from '../coach/components/header2.vue'
	import FieldPopupVue from '../../pages/user/components/Field-popup.vue'
	import popupVue from '@/components/popup.vue'
	import empty from '@/components/empty.vue'
	export default {
		components: {
			headerTwo,
			FieldPopupVue,
			popupVue,
			empty,
		},
		data() {
			return {
				isLoading: false,
				inputStyle:{
					width:'100%'
				},
				query: {
					shop_id:'',
					search: '',
					date_form: '',
					date: '',
					page: 1
				},
				shopQuery:{
					page:1
				},
				coachIndex: -1,
				coachShow: false,
				ItemSctiveIndex: null,
				FieldIndex: -1,
				shopName: '',
				popupShow: false,
				shop_info: {},
				shopParams: [],
				memberShow: false,
				classShow: false,
				typeShow: false,
				shopShow: false,
				list: [],
				coachList: [],
				coachItem: {},
			}
		},
		onLoad() {
			this.getshopList()
		},
		methods: {
			changeShop(e){
				this.$u.debounce(() => {
					const index = e[0]
					this.shopIndex = index
					this.query.shop_id = this.shopParams[index].shop_id
					this.shop_info = this.shopParams[index]
					this.query.page = 1
					this.list = []
					this.getStorememberResList()
				}, 500)
			},
			getshopList(){
				shopList(this.shopQuery).then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						this.shopParams = res.data
						this.shop_info = this.shopParams[0]
						this.query.shop_id = this.shopParams[0].shop_id
						this.getStorememberResList()
					}
				})
			},
			scrolltolower() {
				this.query.page++
				this.getStorememberResList()
			},
			getSearch() {
				this.list = []
				this.query.page = 1
				this.getStorememberResList()
			},
			getStorememberResList() {
				if (this.isLoading) {
					console.log('请求未完成，请稍后');
					return;
				}
				this.isLoading = true;
				storememberResList(this.query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						var list = []
						this.status = 'loading'
						if (this.query.page > res.data.all_page) {
							console.log('nomore');
							this.status = 'nomore'
							return false
						} else {
							console.log('more');
							list = res.data.list
							// 遍历 res.data.list 中的每个对象
							list.forEach(item => {
								// 在对象中添加布尔值（这里以 hasMore 为例）
								item.hasMore = false; // 或者根据其他逻辑设置 true/false
								// // 将修改后的对象添加到新数组中
								// list.push(item);
							});

							// 将新数组与原始 list 数组拼接
							this.list = this.list.concat(list);
						}

						console.log('list', this.list);
					}
				}).finally(()=>{
					this.isLoading = false
				})
			},
			refresh() {
				// 刷新
				// 显示加载动画
				this.isLoading = true;

				// 重置查询参数和列表数据
				this.query.page = 1;
				this.list = [];

				// 模拟请求数据（在实际应用中，你应该使用真实的网络请求）
				setTimeout(() => {
					// 请求完成后隐藏加载动画
					this.isLoading = false;

					this.getStorememberResList()
				}, 1500); // 模拟请求延迟1.5秒
			},
			coachSure() {
				this.coachShow = false
			},
			dateConfirm(e, data) {
				console.log('e321', data);
				this.$u.debounce(() => {
					this.query.date = data
					this.query.page = 1
					this.list = []
					this.getStorememberResList()
				}, 500)
				
			},
			changeHeaderIndex(e) {
				this.$u.debounce(() => {
					this.query.date_form = e == 0 ? 'day' : e == 1 ? 'month' : 'year'
					this.query.date = this.$refs.header.day
					console.log('date', this.query.date);
					this.query.page = 1
					this.list = []
					this.getStorememberResList()
				}, 500)
				
			},
			sure() {
				this.popupShow = false
			},
			changeActiveIndex(item, index) {
				this.$u.debounce(() => {
					this.FieldIndex = index
					this.getatShop({
						shop_id: item.shop_id
					})
					this.query.shop_id = item.shop_id
					this.query.page = 1
					this.list = []
					this.getStorememberResList()
				}, 500)
				
			},
			toggle() {
				console.log(11);
				this.popupShow = true
			},
			getatShop(e) {
				atShop(e).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.shop_info = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;

	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.topw {
		width: 750rpx;
		padding: 24rpx 0 0;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;

		.shop {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 22rpx;
			padding: 0 23rpx;

			.Boutique {
				width: 114rpx;
				height: 36rpx;
				margin-right: 12rpx;
			}

			.title {
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #333333;
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;

				.size {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #666666;
					margin-right: 8rpx;
				}

				.icon {
					width: 10rpx;
					height: 16rpx;
				}
			}
		}

		.search-box {
			width: 750rpx;
			padding: 24rpx;
		}

		.screen {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 0 24rpx;


			.up_down {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #333333;
					margin-right: 7rpx;
				}
			}
		}
	}

	.scroll-view {
		height: 80vh;
	}

	.comlum_Y {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 24rpx;

		.Item {
			width: 702rpx;
			height: 412rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 24rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;

			.top {
				width: 100%;
				height: 64rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1rpx solid #E9E9E9;

				.left {
					flex: 1;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;

					.size {
						margin-right: 8rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #666666;
					}

					.mr {
						margin-right: 8rpx;
					}

					.color1 {
						color: #666666;
					}

					.color2 {
						color: #73F0EA;
					}
				}
			}

			.center {
				display: flex;
				flex-direction: row;
				width: 100%;
				border-bottom: 1rpx solid #e9e9e9;
				padding: 25rpx 0 22rpx;

				.img {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					margin-right: 19rpx;
				}

				.center_vi {
					display: flex;
					flex-direction: row;
					align-items: center;
					flex: 1;

					.comlum_cen {
						display: flex;
						flex-direction: column;
						flex: 1;

						.first {
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-bottom: 12rpx;

							.name_box {
								margin-right: 16rpx;
								font-size: 32rpx;
								font-family: PingFang SC, PingFang SC-Bold;
								font-weight: 700;
								text-align: left;
								color: #333333;
							}

							.logo {
								width: 32rpx;
								height: 32rpx;
								margin-right: 8rpx;
							}

							.size3 {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #000000;
							}
						}

						.center_socund {
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-bottom: 12rpx;

							.phone {
								width: 20rpx;
								height: 30rpx;
								margin-right: 7rpx;
							}

							.size2 {
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #666666;
							}
						}

						.center_three {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #666666;
						}
					}
				}
			}

		}
	}

	.footsc {
		width: 100%;
		display: flex;
		flex-direction: row;
		padding-top: 26rpx;

		.width1 {
			width: 274rpx;
		}

		.width2 {
			flex: 1;
		}

		.foot_Item {
			display: flex;
			flex-direction: column;

			.size4 {
				font-size: 24rpx;
				font-weight: 400;
				margin-bottom: 8rpx;
			}

			.size5 {
				font-size: 36rpx;
				font-weight: 700;
				color: #000000;
			}
		}
	}

	.comlum_Y2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;

		.search-input {
			width: 702rpx;
			height: 66rpx;
			background: #f6f6f6;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
		}

		.classItem {
			width: 702rpx;
			height: 88rpx;
			background: #f6f6f6;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 24rpx;

			.left5 {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex: 1;

				.img {
					width: 40rpx;
					height: 40rpx;
					background: rgba(0, 0, 0, 0.00);
					border-radius: 50%;
					margin-right: 12rpx;
				}

				.size {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #000000;
				}
			}

			.left4 {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #000000;
				flex: 1;
			}

			.distance {
				display: flex;
				flex-direction: row;
				align-items: center;

				.size_s {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #999999;
					margin-right: 16rpx;
				}

				.radio {
					width: 36rpx;
					height: 36rpx;
					border: 2rpx solid #73F0EA;
					border-radius: 50%;
				}
			}
		}
	}
</style>